<template>
  <div class="goodList">
    <div style="height:50px">
      <el-button
        type="primary"
        style="float:left;margin-left:30px;"
        @click="cls"
      >返回上一级</el-button>
    </div>
    <el-table :data="list" style="width: 100%" :border="true" :highlight-current-row="true">
      <el-table-column label="ID" width="80" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.data_id }}</span>
        </template>
      </el-table-column>
      <el-table-column label="日期" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.data_day }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品名" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.goods_name }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="商品数量" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.goods_size }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="实际支付金额" align="center">
        <template slot-scope="scope">
          <div slot="reference" class="name-wrapper">
            <span>{{ scope.row.data_pay_amount }}元</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center">
        <template slot-scope="scope">
          <el-button size="medium" type="success" @click="show(scope.row)">查看详情</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <el-col :span="24" class="toolbar" style="text-align: center;">
      <el-pagination
        background
        :current-page="currentPage"
        :page-count="pageNum"
        :page-size="pagesize"
        style="margin-top:30px;margin-bottom:30px"
        layout="total, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </el-col>
  </div>
</template>
<script>
import request from '@/utils/request'
import { Message } from 'element-ui'
import { getToken, getAccount } from '@/utils/auth'
export default {
  data() {
    return {
      list: [],
      currentPage: 1, // 初始页
      pagesize: 10, // 当前页面内的列表行数
      pageCount: 1,
      pageNum: 1, // 页数
      total: 0,
      temp: {}
    }
  },
  mounted() {
    this.data = this.$route.query.data
    if (this.data === '') {
      this.temp = {
        current_page: this.currentPage,
        page_size: this.pagesize,
        data_day: '100000000'
      }
      this.getList()
    } else {
      this.temp = {
        current_page: this.currentPage,
        page_size: this.pagesize,
        data_day: this.data
      }
      this.getList()
    }
  },
  methods: {
    // 返回上一级
    cls() {
      this.$router.go(-1) // 刷新页面
    },
    // 查看详情
    show(row) {
      this.$router.push({
        path: '/order/goodList/goodListShow',
        query: {
          id: row.data_id,
          data: row.data_day
        }
      })
    },
    // 当前页
    handleSizeChange: function(pagesize) {
      this.pagesize = pagesize
      this.getList()
    },
    // 换页：更新列表数据
    handleCurrentChange: function(currentPage) {
      this.currentPage = currentPage
      this.getList()
    },
    // 获取列表
    getList() {
      return request({
        url: '/v3/admin/operator/data/list',
        method: 'post',
        headers: {
          account_type: getAccount()
        },
        data: this.temp
      }).then(res => {
        res.list.map((value, index) => {
          value.data_pay_amount = value.data_pay_amount / 100
        })
        this.list = res.list
        this.total = res.total_record
      })
    }
  }
}
</script>
<style lang ="scss" scoped>
.goodList {
  margin-top: 60px;
  overflow: hidden;
}

</style>
